<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 客户列表</title>
    <link rel="shortcut icon" href="../../content/static/img/favicon.ico">
    <link href="../../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../content/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <style>
        .fa-female:before {
            color: #fb7cd5;
        }
        .fa-location-arrow:before {
            color: rebeccapurple;
        }
        .fa-mobile-phone:before, .fa-mobile:before{
            color: black;
        }
        .fa-map-marker:before {
            color: #1ab394;
        }
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
</style>
</head>

<body class="gray-bg">
    <div class="content-container">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <ol class="breadcrumb">
                                <li>
                                    <a>商品信息</a>
                                </li>
                                <li>
                                    <a>期初列表</a>
                                </li>
                            </ol>
                        </div>
                        <div class="ibox-content">
                            <div class="tabs-container">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 期初商品库存</a>
                                    </li>
                                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">期初应收欠款</a>
                                    </li>
                                    <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">期初应付欠款</a>
                                    </li>
                                    <li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false">期初账户余额</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div id="tab-1" class="tab-pane active">
                                        <div class="panel-body">
                                            <div class="col-sm-12" style="background-color: #f5f5f5;padding: 12px 12px 10px">
                                                <div class="col-sm-9"> </div>
                                                <div class="col-sm-3">
                                                    <div class="input-group">
                                                        <input type="text" placeholder="搜索编号、名称、电话" class="input-sm form-control">
                                                        <span class="input-group-btn">
                                                            <button type="button" class="btn btn-sm btn-primary"> 搜索</button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                                                <div class="alert alert-info">
                                                    <button type="button" class="btn btn btn-primary" data-toggle="modal" data-target="#edit"> 新增</button>
                                                    <button type="button" class="btn btn btn-info"> 导入</button>
                                                    <button type="button" class="btn btn btn-success"> 导出</button>
                                                    &nbsp;&nbsp;<span>总条数：<span>12 条</span></span>
                                                    &nbsp;&nbsp;<span>总金额：<span>-57409.00(人民币/RMB)</span></span>
                                                </div>
                                            </div>
                                            <table class="table table-hover">
                                                <thead style="background: #f5f5f5;">
                                                    <tr>
                                                        <th>
                                                            <div class="checkbox checkbox-success">
                                                                <input id="checkbox1" type="checkbox"><label for="checkbox1"> #</label>
                                                            </div>
                                                        </th>
                                                        <th>商品编号</th>
                                                        <th>
                                                            <div class="tooltip-demo">商品名称
                                                                <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="该客户的唯一编码"></label>
                                                            </div>
                                                        </th>
                                                        <th>规格</th>
                                                        <th>属性</th>
                                                        <th>单位</th>
                                                        <th>期初库存数量</th>
                                                        <th>期初库存金额</th>
                                                        <th>状态</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <div class="checkbox checkbox-success">
                                                                <input id="checkbox2" type="checkbox"><label for="checkbox2"></label>
                                                            </div>
                                                        </td>
                                                        <td>张三</td>
                                                        <td><a href="" data-toggle="modal" data-target="#edit">cu0000307</a></td>
                                                        <td class="text-navy">男</td>
                                                        <td>23</td>
                                                        <td class="text-danger" style="color: #F00;">-200.00</td>
                                                        <td>15150444723</td>
                                                        <td>普通客户</td>
                                                        <td><i class="fa fa-close text-danger"></i></td>
                                                        <td>
                                                            <a href="" class="">编辑</a>
                                                            <a href="" class="">删除</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="checkbox checkbox-success">
                                                                <input id="checkbox6" type="checkbox"><label for="checkbox6"></label>
                                                            </div>
                                                        </td>
                                                        <td>李四</td>
                                                        <td><a href="" data-toggle="modal" data-target="#edit">cu0000105</a></td>
                                                        <td class="text-navy">男</td>
                                                        <td>27</td>
                                                        <td class="text-danger" style="color: #F00;">-800.00</td>
                                                        <td>15150444723</td>
                                                        <td>普通客户</td>
                                                        <td><i class="fa fa-check text-navy"></i></td>
                                                        <td>
                                                            <a href="" class="">编辑</a>
                                                            <a href="" class="">删除</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="checkbox checkbox-success">
                                                                <input id="checkbox3" type="checkbox"><label for="checkbox3"></label>
                                                            </div>
                                                        </td>
                                                        <td>王麻子</td>
                                                        <td><a href="" data-toggle="modal" data-target="#edit">cu0000661</a></td>
                                                        <td class="text-warning">女</td>
                                                        <td>65</td>
                                                        <td class="text-danger" style="color: #F00;">-56409.00</td>
                                                        <td>15150444723</td>
                                                        <td>普通客户</td>
                                                        <td><i class="fa fa-check text-navy"></i></td>
                                                        <td>
                                                            <a href="">编辑</a>
                                                            <a href="">删除</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="checkbox checkbox-success">
                                                                <input id="checkbox4" type="checkbox"><label for="checkbox4"></label>
                                                            </div>
                                                        </td>
                                                        <td>李文明</td>
                                                        <td><a href="" data-toggle="modal" data-target="#edit">cu0000661</a></td>
                                                        <td class="text-warning">女</td>
                                                        <td>65</td>
                                                        <td class="text-danger" style="color: #F00;">-569.00</td>
                                                        <td>15150444723</td>
                                                        <td>普通客户</td>
                                                        <td><i class="fa fa-check text-navy"></i></td>
                                                        <td>
                                                            <a href="">编辑</a>
                                                            <a href="">删除</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="checkbox checkbox-success">
                                                                <input id="checkbox5" type="checkbox"><label for="checkbox5"></label>
                                                            </div>
                                                        </td>
                                                        <td>赵武</td>
                                                        <td><a href="" data-toggle="modal" data-target="#edit">cu0000661</a></td>
                                                        <td class="text-warning">女</td>
                                                        <td>65</td>
                                                        <td class="text-danger" style="color: #F00;">-56.00</td>
                                                        <td>15150444723</td>
                                                        <td>普通客户</td>
                                                        <td><i class="fa fa-close text-danger"></i></td>
                                                        <td>
                                                            <a href="">编辑</a>
                                                            <a href="">删除</a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <div class="fixed-table-pagination col-sm-12">
                                                <div class="pull-left pagination-detail" style="float: right;">
                                                    <span class="pagination-info" style="line-height: 74px;margin-right: 1125px;">显示第 1
                                                        到第
                                                        10 条记录，总共 21 条记录</span>
                                                    <ul class="pagination pagination-outline" style="float: right;">
                                                        <li class="page-first disabled"><a href="javascript:void(0)">«</a></li>
                                                        <li class="page-pre disabled"><a href="javascript:void(0)">‹</a></li>
                                                        <li class="page-number active"><a href="javascript:void(0)">1</a></li>
                                                        <li class="page-number"><a href="javascript:void(0)">2</a></li>
                                                        <li class="page-number"><a href="javascript:void(0)">3</a></li>
                                                        <li class="page-next"><a href="javascript:void(0)">›</a></li>
                                                        <li class="page-last"><a href="javascript:void(0)">»</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="tab-2" class="tab-pane">
                                        <div class="panel-body">
                                            <strong>移动设备优先</strong>
                                            <p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3
                                                中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap
                                                是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
                                        </div>
                                    </div>
                                    <div id="tab-3" class="tab-pane">333</div>
                                    <div id="tab-4" class="tab-pane">444</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal inmodal" id="edit" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content animated flipInY">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                                <span class="sr-only">Close</span>
                            </button>
                            <h4 class="modal-title">用户详情</h4>
                            <small class="font-bold">基本信息
                        </div>
                        <div class="modal-body" style="height: 620px;">
                            <div class="col-sm-12">
                                <div>
                                    <div class="ibox-content no-padding border-left-right">
                                        <img alt="image" class="img-responsive" src="../../content/static/img/profile_big.jpg">
                                    </div>
                                    <div class="ibox-content profile-content">
                                        <h4><strong>Beaut-zihan</strong></h4>
                                        <!-- <i class="fa fa-female">女</i> -->
                                        <p><i class="fa fa-female"> 男</i>&nbsp;&nbsp;<i class="fa fa-location-arrow">
                                                普通会员</i>&nbsp;&nbsp;<i class="fa fa-mobile"> 15150444723</i></p>
                                        <p><i class="fa fa-map-marker"></i>上海市闵行区绿地科技岛广场A座2606室</p>
                                        <h5>关于我</h5>
                                        <p>
                                            会点前端技术，div+css啊，jQuery之类的，不是很精；热爱生活，热爱互联网，热爱新技术；有一个小的团队，在不断的寻求新的突破。
                                        </p>
                                        <div class="row m-t-lg">
                                            <div class="col-sm-4">
                                                <span class="bar" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg
                                                    class="peity" height="16" width="32">
                                                    <rect fill="#1ab394" x="0" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect>
                                                    <rect fill="#d7d7d7" x="3.3" y="10.666666666666668" width="2.3"
                                                        height="5.333333333333333"></rect>
                                                    <rect fill="#1ab394" x="6.6" y="0" width="2.3" height="16"></rect>
                                                    <rect fill="#d7d7d7" x="9.899999999999999" y="5.333333333333334"
                                                        width="2.3" height="10.666666666666666"></rect>
                                                    <rect fill="#1ab394" x="13.2" y="7.111111111111111" width="2.3"
                                                        height="8.88888888888889"></rect>
                                                    <rect fill="#d7d7d7" x="16.5" y="0" width="2.3" height="16"></rect>
                                                    <rect fill="#1ab394" x="19.799999999999997" y="3.555555555555557"
                                                        width="2.3" height="12.444444444444443"></rect>
                                                    <rect fill="#d7d7d7" x="23.099999999999998" y="10.666666666666668"
                                                        width="2.3" height="5.333333333333333"></rect>
                                                    <rect fill="#1ab394" x="26.4" y="7.111111111111111" width="2.3"
                                                        height="8.88888888888889"></rect>
                                                    <rect fill="#d7d7d7" x="29.7" y="12.444444444444445" width="2.3"
                                                        height="3.5555555555555554"></rect>
                                                </svg>
                                                <h5><strong>169</strong> 文章</h5>
                                            </div>
                                            <div class="col-sm-4">
                                                <span class="line" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg
                                                    class="peity" height="16" width="32">
                                                    <polygon fill="#1ab394" points="0 15 0 7.166666666666666 3.5555555555555554 10.5 7.111111111111111 0.5 10.666666666666666 5.5 14.222222222222221 7.166666666666666 17.77777777777778 0.5 21.333333333333332 3.833333333333332 24.888888888888886 10.5 28.444444444444443 7.166666666666666 32 12.166666666666666 32 15"></polygon>
                                                    <polyline fill="transparent" points="0 7.166666666666666 3.5555555555555554 10.5 7.111111111111111 0.5 10.666666666666666 5.5 14.222222222222221 7.166666666666666 17.77777777777778 0.5 21.333333333333332 3.833333333333332 24.888888888888886 10.5 28.444444444444443 7.166666666666666 32 12.166666666666666"
                                                        stroke="#169c81" stroke-width="1" stroke-linecap="square"></polyline>
                                                </svg>
                                                <h5><strong>28</strong> 关注</h5>
                                            </div>
                                            <div class="col-sm-4">
                                                <span class="bar" style="display: none;">5,3,2,-1,-3,-2,2,3,5,2</span><svg
                                                    class="peity" height="16" width="32">
                                                    <rect fill="#1ab394" x="0" y="0" width="2.3" height="10"></rect>
                                                    <rect fill="#d7d7d7" x="3.3" y="4" width="2.3" height="6"></rect>
                                                    <rect fill="#1ab394" x="6.6" y="6" width="2.3" height="4"></rect>
                                                    <rect fill="#d7d7d7" x="9.899999999999999" y="10" width="2.3"
                                                        height="2"></rect>
                                                    <rect fill="#1ab394" x="13.2" y="10" width="2.3" height="6"></rect>
                                                    <rect fill="#d7d7d7" x="16.5" y="10" width="2.3" height="4"></rect>
                                                    <rect fill="#1ab394" x="19.799999999999997" y="6" width="2.3"
                                                        height="4"></rect>
                                                    <rect fill="#d7d7d7" x="23.099999999999998" y="4" width="2.3"
                                                        height="6"></rect>
                                                    <rect fill="#1ab394" x="26.4" y="0" width="2.3" height="10"></rect>
                                                    <rect fill="#d7d7d7" x="29.7" y="6" width="2.3" height="4"></rect>
                                                </svg>
                                                <h5><strong>240</strong> 关注者</h5>
                                            </div>
                                        </div>
                                        <div class="user-button">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <button type="button" class="btn btn-primary btn-sm btn-block"><i
                                                            class="fa fa-envelope"></i>
                                                        发送消息</button>
                                                </div>
                                                <div class="col-sm-6">
                                                    <button type="button" class="btn btn-default btn-sm btn-block"><i
                                                            class="fa fa-coffee"></i>
                                                        赞助</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../content/js/lib/vue/vue.min.js"></script>
    <script src="../../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../../content/static/js/plugins/switchery/switchery.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../../content/js/lib/vue/vue-modal.js"></script>
    <script src="../../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../../content/js/common.js"></script>
    <script type="text/javascript">
        var vmData = {};
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {},
        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>